<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
    
    <script>
      document.addEventListener('DOMContentLoaded', function () {
        document.getElementById('dom-loaded-js').addEventListener('click', function () {
          alert('你点了我！');
        });
      });
    </script>
    
    <!--3.async:当页面脚本间相互独立且不依赖其它任何脚本时`async`是最理想的选择-->
    <script async src="staticest3.js"></script>
    <script async src="staticest4.js"></script>
    <script async src="staticest5.js"></script>
    
    <!--4.defer表示推迟，浏览器遇到`defer`脚本时将按照在页面中出现的顺序加载，即解决`async`无法控制顺序的问题-->
  </head>
  <body>
    <!--1.JS脚本放于body元素后-->
    <input type="button" value="点我试试" id="body-after-js"/>
    
    <!--2.DOMContentLoaded-->
    <input type="button" value="点我试试" id="dom-loaded-js"/>
  </body>
  
  <script src="staticest2.js"></script>
</html>